<!-- 我的客户 -->
<template>
	<loading-page v-if="showSkeleton" />
	<view class="selects">
		<!-- 状态 -->
		<u-select class="u-select" type="contact_status" :value="contact_status.value" :list="contact_status.list" @callback="callbackSelect" />
		<!-- 来源 -->
		<u-select class="u-select" type="user_from" :value="user_from.value" :list="user_from.list" @callback="callbackSelect" />
	</view>
	<!-- list -->
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<list-customer-item type="my" :autoSend="data.autoSend" :item="item" :index="index" @changeStatus="changeStatus" />
		</template>
	</view>
	<!-- 无数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
</template>
<script setup>
	import { ref, reactive, watch, defineComponent } from 'vue';
	import { onReachBottom, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
	import useGetList from '@/common/hooks/useGetList.js';
	import listCustomerItem from '../components/list-customer-item.vue';
	import useSelect from '../components/useSelect.js';
	import useCheck from '../components/useCheck.js';
	defineComponent({
		listCustomerItem
	});
	onReachBottom(() => {
		reachBottom();
	});
	onPullDownRefresh(() => {
		pullDownRefresh();
	});
	onUnload(() => {
		clearTime();
	});
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom, pullDownRefresh } = useGetList();
	const { params, contact_status, user_from, callbackSelect } = useSelect();
	const { checkContinue, checkRefresh, checkForbid, changeBtnsStatus, clearTime } = useCheck();
	const defaultParams = {
		contact_status: 'all',
		user_from: 'all'
	};
	const data = reactive({
		searchParams: defaultParams,
		autoSend: 1
	});
	watch(params, (newVal, oldVal) => {
		data.searchParams = Object.assign(defaultParams, newVal);
		init(oldVal ? true : false);
	}, { immediate: true, deep: true });
	// 初始化数据
	async function init(showLoading = false) {
		const res = await getDataList({
			url: '/crm/Custom/customList',
			params: {
				...data.searchParams
			},
			showLoading: showLoading,
			key: 'lists'
		});
		contact_status.value.list = res.contactstatusArr.map(item => {
			return {
				name: item.values,
				value: item.key
			}
		});
		user_from.value.list = res.userfromArr.map(item => {
			return {
				name: item.values,
				value: item.key
			}
		});
		// 列表状态检测
		if (dataList.value.length) checkContinue(dataList.value, 'my');
		// 检测是否禁用功能
		checkForbid(res);
		// 检测刷新
		checkRefresh(() => {
			pullDownRefresh();
		});
		data.autoSend = res.defaultgreetings;
	}
	// 改变状态
	function changeStatus(o) {
		changeBtnsStatus(o, dataList.value);
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		background-color: $bgColor;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.selects {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 9;
		@include flex(row, flex-start);
		padding: 4rpx 28rpx;
		background-color: #F3F5F7;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background-color: #F3F5F7;
		}
		.u-select {
			margin: 0 50rpx 0 0;
		}
	}
	.list {
		padding: 0 28rpx;
	}
</style>
